{extend name="common/layout"}
{block name="title"}分类列表{/block}
{block name="content"}
<div id="content">
    <div class="page-header">
        <div class="container-fluid">
            <div class="pull-right">
                <a href="{:url('set')}" data-toggle="tooltip" title="新增" class="btn btn-primary  "> <i
                        class="fa fa-plus"></i>
                </a>
                <button type="button" data-toggle="tooltip" title="删除" class="btn btn-danger"
                        onclick="confirm('确认？') ? $('#form-index').submit() : false;">
                    <i class="fa fa-trash-o"></i>
                </button>
            </div>
            <h1>分类管理</h1>
            <ul class="breadcrumb">
                <li>
                    <a href="/back/site/index.html">首页</a>
                </li>
                <li>
                    <a href="/back/brand/index.html">分类管理</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="container-fluid">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <i class="fa fa-list"></i>
                    分类列表
                </h3>
            </div>
            <div class="panel-body">
                <form action="{:url('index')}" method="get">
                    <!--<div class="well">-->
                        <!--<div class="row">-->
                            
                                <!--<div class="col-sm-6">-->
                                        <!--<div class="form-group">-->
                                            <!--<label class="control-label" for="input-filter-title">分类</label>-->
                                            <!--<input type="text" name="filter[title]" value="{$filter['title']|default=''}"-->
                                                   <!--placeholder="分类" id="input-filter-title" class="form-control"/>-->
                                        <!--</div>-->
                                    <!--</div>-->

                                <!--<div class="col-sm-6">-->
                                        <!--<div class="form-group">-->
                                            <!--<label class="control-label" for="input-filter-parent_id">上级分类</label>-->
                                            <!--<input type="text" name="filter[parent_id]" value="{$filter['parent_id']|default=''}"-->
                                                   <!--placeholder="上级分类" id="input-filter-parent_id" class="form-control"/>-->
                                        <!--</div>-->
                                    <!--</div>-->

                        <!--</div>-->

                        <!--<div class="row">-->
                            <!--<div class="col-sm-12 col-md-12 col-lg-12">-->
                                <!--<button type="submit" id="button-filter" class="btn btn-primary pull-right">-->
                                    <!--<i class="fa fa-search"></i>-->
                                    <!--筛选-->
                                <!--</button>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                </form>

                <form action="{:url('multi')}" method="post" enctype="multipart/form-data" id="form-index">

                    <div class="table-responsive">
                        <table class="table table-bordered table-hover category-table">
                            <thead>
                            <tr>
                                <td style="width: 1px;" class="text-center">
                                    <input type="checkbox"
                                           onclick="$('input[name=\'selected[]\']').prop('checked', this.checked);"/>
                                </td>
                                
                                <!--<td class="text-left">id</td>-->
                                <td class="text-left">
                                分类
                                </td>


                                <td class="text-right">管理</td>
                            </tr>
                            </thead>
                            <tbody>
                            {if count($list)!=0}
                            {volist name='list' id='item'}
                            <tr data-id="{$item.id}" data-parent-id="{$item.parent_id}" data-leavel="{$item.leavel}" class="category-tr" is_hide="true">
                                <td class="text-center">
                                    <input type="checkbox" name="selected[]" value="{$item['id']|default=''}"/>
                                </td>
                <!--<td class="text-left">{$item["id"]}</td>-->
                <td class="text-left category-title" >{:str_repeat('&nbsp;',$item['leavel']*6)}{$item["title"]}</td>

                                <td class="text-right">
                                            <a href="{:url('set',['id'=>$item['id']])}" data-toggle="tooltip" title="编辑"
                                       class="btn btn-primary ">
                                        <i class="fa fa-pencil"></i>
                                    </a>
                                </td>
                            </tr>
                            {/volist}
                            {else/}
                            <td  class="text-center" colspan="5">暂无数据</td>
                            {/if}

                            </tbody>
                        </table>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function(){
        //初始化，只显示根节点
        $(".category-tr:not(:first)").hide();
        //点击事件
        $(".category-table").on("click",".category-title",function () {
           var tr = $(this).parent();
           var id = tr.attr("data-id");
           var is_hide = tr.attr("is_hide")==="false"?false:true;
           //如果隐藏，则将所点tr的子代都关闭掉，status为1 需要递归
           //如果显示，则只将所点tr直系孩子tr（不包含后代）显示出来，status为0 不需要递归，一次隐藏就可以
            if(is_hide){
                hideTr(id,0);
                console.log("show");
            }
            else{
                hideTr(id,1);
                console.log("hide");
            }
            tr.attr("is_hide",!is_hide);
        });

        //传入点击tr的id，递归运算
        function  hideTr(id,status) {
            $(".category-tr").each(function () {
                var parent_id = $(this).attr("data-parent-id");
               if(id==parent_id){
                   if(status){
                       $(this).hide();
                       hideTr($(this).attr("data-id"),1);
                   }
                   else{
                       $(this).show();
                   }

               }
            });
            
        }


    });
</script>

{/block}
